<template>
  <section>
    <van-sticky>
      <PageHeader title="课程"/>
    </van-sticky>

    <van-list
      class="pd10"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="requestData">
      <div class="flex flex-row mb10 bg-color-white course-item"
           @click="$router.push({name: 'CollegeCourse', query: {id: item.id}})"
           v-for="(item, index) in dataList"
           :key="index">
        <img :src="item.img_url" class="flex img" />
        <div class="flex flex-col flex-1 pd10 font-common">
          <div class="flex flex-row flex-left font-big">{{item.name}}</div>
          <div class="flex flex-row flex-left flex-1 color-gray">{{item.intro}}</div>
          <div class="flex flex-row color-gray">
            <div class="flex flex-row flex-left flex-1">
              <!-- {{item.apply_amount}}人在学 -->
            </div>

            <div class="flex flex-row flex-right flex-1 color-red">
              <span v-if="item.charge==0">免费</span>
              <span v-else>￥{{item.charge}}</span>
            </div>
          </div>
        </div>
      </div>
    </van-list>

    <Tabbar active="college"/>
  </section>
</template>

<script>
  import Vue from 'vue';
  import {Toast, Dialog, List, Search, Sticky, Tab, Tabs, Button} from 'vant';
  import {courseListsUri} from "../../common/api";
  import PageHeader from "../componets/PageHeader";
  import Tabbar from '../componets/Tabbar';
  Vue.use(Toast).use(Dialog).use(List).use(Search).use(Sticky).use(Tab).use(Tabs).use(Button);

  export default {
    components: {
      PageHeader,
      Tabbar
    },
    data() {
      return {
        currentPage: 1,
        lastPage: 0,
        total: 0,
        pageSize: 10,
        loading: false,
        finished: false,
        dataList: []
      }
    },
    methods: {
      requestData() {
        const that = this;
        this.loading = true;
        const url = courseListsUri + '?page_size=' + that.pageSize + '&page=' + that.currentPage;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            that.toast(msg);
          } else {
            that.loading = false;
            if (that.currentPage >= data.last_page) {
              that.finished = true;
            }
            that.currentPage = that.currentPage + 1;
            for (let i = 0; i < data.data.length; i++) {
              that.dataList.push(data.data[i]);
            }
            that.total = data.total;
            that.lastPage = data.last_page;
          }
        }, response => {
          // error callback
        })
      }
    },
    mounted: function () {

    }
  }
</script>

<style scoped>
  .course-item {
    /*box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.02);*/
    /*-webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.02);*/
    box-shadow:6px 6px 10px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow:6px 6px 10px rgba(0, 0, 0, 0.4);
  }
  .course-item .img {
    height: 100px;
    width: 120px;
  }
</style>
